<script setup>
import {defineProps} from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入'
  },
  type: {
    type: String,
    default: 'text'
  },
  label: {
    type: String,
    default: ''
  },
})
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <div class="c-input">
    <div class="left" v-if="label">
      <span>{{label}}</span>
    </div>
    <div class="right">
      <input :value="props.modelValue"
             @input="emit('update:modelValue', $event.target.value)"
             :type="type"
             :placeholder="placeholder"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  .c-input{
    display: flex;
    align-items: center;
    .left{
      width: 5vw;
      text-align: center;
      span{
        height: 4vh;
        line-height: 4vh;
      }
    }
    .right {
      display: flex;
      flex: 1;
      input{
        width: 100%;
        height: 4vh;
        line-height: 4vh;
        border: 1px solid #DCDFE6;
        outline: none;
        padding: 0 10px;
        border-radius: 4px;
        &::placeholder{
          font-size: 1.3vh;
        }
      }
    }
  }
</style>
